<template>
	<view class="auth" v-if="info">
		<!-- <scroll-view scroll-y="true" class="info" style="margin-top: 20rpx;"> -->
		<view class="info">
			<view class="line avatarBox">
				<view class="l">头像：</view>
				<view class="r"></view>
				<u-upload class="avatar" width="44" height="44" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" 
					:maxCount="1"></u-upload>
				<!-- <image :src="oss(info.avatar)" class="avatar" mode=""></image> -->
			</view>
			<view class="line">
				<view class="l">昵称：</view>
				<input type="text" class="r" v-model="info.nickname" placeholder="请输入昵称" />
			</view>

			<view class="line">
				<view class="l">性别：</view>
				<view class="" style="flex: 1;"></view>
				<view class="unit">
					<u-radio-group v-model="unit" placement="row">
						<u-radio activeColor="#FFCE54" label="男" name="男" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="女" name="女" :customStyle="{marginRight: '20px'}">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="line">
				<view class="l">年龄：</view>
				<input type="number" class="r" v-model="info.age" placeholder="请输入年龄(只能是数字)" />
				<!-- <input type="number" class="r" disabled="" @click="show = true" v-model="info.birthday"
					placeholder="请选择时间" />
				<u-icon size="20" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon> -->
			</view>
			<view class="line" @click="bind">
				<view class="l">手机号：</view>
				<input type="number" class="r" v-model="info.mobile" disabled placeholder="请输入手机号" />
			</view>
			<view class="line">
				<view class="l">微信号：</view>
				<input type="text" class="r" v-model="info.wechat" placeholder="请输入微信号" />
			</view>
			
			<!-- <view class="line">
				<view class="l">地址信息：</view>
				<input type="number" class="r" value="" placeholder="请选择地址" />
				<u-icon size="20" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
			</view> -->
		</view>
		<!-- </scroll-view> -->
		
		<view class="zh-info">
			<view class="line">
				<view class="l">支付宝姓名：</view>
				<input type="text" class="r" v-model="info.alipayname" placeholder="请输入支付宝姓名" />
			</view>
			<view class="line">
				<view class="l">支付宝账号：</view>
				<input type="text" class="r" v-model="info.alipay" placeholder="请输入支付宝账号" />
			</view>
		</view>
		
		<view class="zh-info">
			<view class="line imgBox" v-if="unchangeable_city">
				<view class="l">详细地址：</view>
				<textarea
					:value="(info.province || '')+ (info.city || '') + (info.district || '') + (info.address || '')"
					disabled class="r con" @click="nearby" placeholder="请选择详细地址" />
				<image src="../../static/index/address.png" class="address" mode="" @click="nearby"></image>
			</view>
			<view class="line">
				<view class="l">小区：</view>
				<input type="text" class="r" v-model="info.area" placeholder="请输入小区" />
			</view>
			<u-datetime-picker :show="show" v-model="start1" mode="date" :minDate="-2209104000" @cancel="show = false"
				@confirm="confirm"></u-datetime-picker>
		</view>

		<view class="btn" @click="save">保存</view>
		<!-- <u-calendar :show="show" @confirm="confirm" @close="show = false"></u-calendar> -->

	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	
	// #ifdef APP
	import permision from "@/js_sdk/wa-permission/permission.js"
	// #endif
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				show: false,
				unit: '',
				info: '',
				start1: Date.parse(new Date()),
				date: currentDate,
				fileList1: [],
				unchangeable_city:false
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getInfo()
		},
		mounted() {
			let that = this
			// #ifdef APP
			
			uni.$on('selectAddress', function(data) {
				console.log(data)
				that.info.province = data.province
				that.info.city = data.city
				that.info.district = data.district
				that.info.lng = data.location.longitude
				that.info.lat = data.location.latitude
				that.info.address = data.address + data.name
			})
			// #endif
			
			uni.$on('bindmobile', function(data) {
				that.info.mobile = data.mobile
			})
		},
		onShow() {
			// #ifdef MP-WEIXIN
			const locations = chooseLocation.getLocation();
			console.log(locations)
			if (locations) {
				this.info.address = locations.name
				this.info.province = locations.province
				this.info.city = locations.city
				this.info.district = locations.district
				this.info.lat = locations.latitude
				this.info.lng = locations.longitude
			}
			// #endif




		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event.name)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result,
							fullurl: this.oss(result)
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}
			
				}
				console.log(this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data.url)
							} else {
								resolve()
							}
						}
					});
				})
			},
			bind() {
				if(!this.info.mobile){
					this.authTo('pages/my/bind')
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 80;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			save() {
				if (this.fileList1.length === 0) {
					uni.$u.toast('请上传头像')
					return
				} else {
					this.info.avatar = this.fileList1[0].fullurl
				}
				// if (this.info.nickname.length > 15 || this.info.nickname.length < 3) {
				// 	uni.$u.toast('昵称长度需大于2小于15')
				// 	return
				// }
				if (!uni.$u.test.number(this.info.age)) {
					uni.$u.toast('请输入正确的年龄')
					return
				}

				if (this.info.mobile === '') {
					uni.$u.toast('请输入手机号')
					return
				}
				if (this.info.wechat === '') {
					uni.$u.toast('请输入微信号')
					return
				}
				if (this.info.alipayname === '') {
					uni.$u.toast('请输入支付宝姓名')
					return
				}
				if (this.info.alipay === '') {
					uni.$u.toast('请输入支付宝账号')
					return
				}
				if (this.info.address === '') {
					uni.$u.toast('请选择位置')
					return
				}
				
				uni.$u.http.post('/updateuser', {

					...this.info,
					gender: this.unit === '男' ? 0 : 1,
					type: 'send',
				}).then(res => {
					if (res.code === 1) {
						this.$u.toast(res.msg);
						setTimeout(() => {
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					}
				}).catch((res) => {

				})
			},
			nearby() {
				
				// #ifdef MP-WEIXIN
				const key = 'LNWBZ-4DTKU-JQCVV-23LKL-4GM2V-2RBQI'; //使用在腾讯位置服务申请的key
				const referer = '跑腿'; //调用插件的app的名称
				let location;
				if (this.info.lat) {
					location = JSON.stringify({
						latitude: this.info.lat,
						longitude: this.info.lng
					});
				} else {
					location = ''
				}
				console.log(location)
				const category = '';

				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
						location + '&category=' + category
				});
				// #endif

				// #ifdef APP

				let allow = permision.checkSystemEnableLocation()
				if (allow) {
					uni.$u.route({
						url: 'pages/my/map'
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '请打开手机位置信息或点击下方确定开启APP权限中的位置信息',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				// #endif
			},
			confirm(e) {
				this.info.birthday = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.show = false
			},
			getInfo() {
				uni.$u.http.post('/updateuser', ).then(res => {
					if (res.code == 1) {
						this.info = res.data
						// if(res.data.birthday){
						// 	this.date = res.data.birthday
						// }
						if(res.data.avatar.indexOf('data:') === -1){
							this.fileList1.push({
								fullurl: res.data.avatar,
								url: this.oss(res.data.avatar),
							})
						}
						
						this.unit = res.data.gender === 0 ? '男' : '女'
						
						if(!this.info.city) {
							this.unchangeable_city = true
						}
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}
	
	.zh-info {
		width: 686rpx;
		// height: 202rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: auto;
		margin-top: 24rpx;
		
		.line {
			padding: 0 32rpx 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F6F6F6;
		
			.l {
				color: #575859;
				font-size: 32rpx;
				width: 220rpx;
				// text-align: right;
			}
		
			.r {
				flex: 1;
				text-align: right;
				padding-right: 20rpx;
			}
		
			.pickBox {
				height: 100%;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 20rpx;
			}
		}
		.imgBox {
			height: auto;
			align-items: flex-start;
			padding: 32rpx;
			justify-content: flex-start;
			position: relative;
		
			.address {
				position: absolute;
				width: 30rpx;
				height: 40rpx;
				right: 30rpx;
				bottom: 30rpx;
				z-index: 100;
			}
		}
	}

	.auth {
		// background: linear-gradient(to bottom, #FFC141, #F6F6F6);
		// background-size: 750rpx 500rpx;
		// background-repeat: no-repeat;
		// padding-top: 50rpx;
		// display: flex;
		// flex-direction: column;
		// box-sizing: border-box;
		// height: 100vh;

		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto;
			width: 590rpx;
			border-radius: 44rpx;
			flex-shrink: 0;
		}

		.info {
			background: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;

			// flex: 1;
			// overflow: hidden;
			// box-sizing: border-box;
			width: 686rpx;
			margin: auto;

			.notice {
				font-size: 24rpx;
				color: #999999;
				padding-left: 20rpx;
				padding-top: 20rpx;
			}

			.line {
				padding: 0 32rpx 0;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F6F6F6;

				.l {
					color: #575859;
					font-size: 32rpx;
					width: 220rpx;
					// text-align: right;
				}

				.r {
					flex: 1;
					text-align: right;
					padding-right: 20rpx;
				}

				.pickBox {
					height: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-right: 20rpx;
				}
			}

			.avatarBox {
				// padding: 20rpx;
				// height: 180rpx;
				
				.avatar {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					position: absolute;
					right: 64rpx;
					
					/deep/.u-upload__wrap__preview__image {
						border-radius: 50%;
					}
				}
			}

			.imgBox {
				height: auto;
				align-items: flex-start;
				padding: 32rpx;
				justify-content: flex-start;
				position: relative;

				.address {
					position: absolute;
					width: 30rpx;
					height: 40rpx;
					right: 30rpx;
					bottom: 30rpx;
					z-index: 100;
				}
			}

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 170rpx;
				border: 1px solid #FFCE54;
				border-radius: 20rpx;

				.icon {
					width: 51rpx;
					height: 49rpx;
				}

				.word {
					color: #FF8007;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
